<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>数据网格之行编辑 - jQuery EasyUI 移动演示</title>
	<link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/mobile.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.mobile.js"></script>
</head>
<body>
	<table id="dg" data-options="header:'#hh', iconCls: 'icon-edit', singleSelect: true, fit:true, fitColumns:true, border: false, scrollbarSize: 0, data: data, onClickRow: onClickRow">
		<thead>
			<tr>
				<th data-options="field:'itemid',halign:'center'">物料编码</th>
            	<th data-options="field:'productid',halign:'center',editor:'textbox'">BOM所属<br/>产品代码</th>
                <th data-options="field:'listprice',align:'right',halign:'center',editor:{type:'numberbox',options:{precision:1}}">清单价格<br/><span onclick="alert(title)" title="1位小数">*</span></th>
                <th data-options="field:'unitcost',align:'right',halign:'center',editor:{type:'numberbox'}">成本单价<br/><span onclick="alert(title)" title="整数">*</span></th>
                <th data-options="field:'attr1',halign:'center',editor:'textbox'">物料属性<br/>（型号规格）</th>
				<th data-options="field:'status',align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">状态</th>
			</tr>
		</thead>
	</table>
	<div id="hh">
		<div class="m-toolbar">
			<div class="m-title" onclick="alert(title)" title="Row Editing">行编辑</div>
			<div class="m-right">
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()"></a>
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()"></a>
				<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()"></a>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		var data = 	[
			{"productid":"FI-SW-01","productname":"Koi 锦鲤","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large 大尾","itemid":"EST-1"},
			{"productid":"K9-DL-01","productname":"Dalmation 斑点狗","unitcost":12.00,"status":"","listprice":18.50,"attr1":"Spotted Adult Female 成年母","itemid":"EST-10"},
			{"productid":"RP-SN-01","productname":"Rattlesnake 响尾蛇","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless 毒少","itemid":"EST-11"},
			{"productid":"RP-SN-01","productname":"Rattlesnake 响尾蛇","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless 声弱","itemid":"EST-12"},
			{"productid":"RP-LI-02","productname":"Iguana 鬣鳞蜥","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult 成年绿","itemid":"EST-13"},
			{"productid":"FL-DSH-01","productname":"Manx 曼岛猫","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless 短尾","itemid":"EST-14"},
			{"productid":"FL-DSH-01","productname":"Manx 曼岛猫","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail 有尾","itemid":"EST-15"},
			{"productid":"FL-DLH-02","productname":"Persian 波斯猫","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female 成年母","itemid":"EST-16"},
			{"productid":"FL-DLH-02","productname":"Persian 波斯猫","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male 成年公","itemid":"EST-17"},
			{"productid":"AV-CB-01","productname":"Amazon Parrot 亚马逊鹦鹉","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male 成年雄","itemid":"EST-18"}
		];
		$(function(){
			$('#dg').datagrid({
				data: data
			});
		});
		
		var editIndex = undefined;
		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		function removeit(){
			if (editIndex == undefined){return}
			$('#dg').datagrid('cancelEdit', editIndex)
					.datagrid('deleteRow', editIndex);
			editIndex = undefined;
		}
		function accept(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
	</script>
</body>
</html>